<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>PlayRTSP Demo By:lizongsheng</title>
    <style type="text/css" media="screen">
        video {
            display: block;
        }
        
        .module {
            margin: 0 auto;
            width: 1000px;
            padding: 6px 8px;
            box-sizing: border-box;
            border: 1px solid #e5e5e5;
        }
        
        .module .item {
            margin-bottom: 4px;
        }
        
        .module .btn {
            min-width: 80px;
            min-height: 24px;
            margin-top: 100px;
            margin-left: 80px;
        }
    </style>
</head>

<body>
    <div class="module">
        <div class="item">
            <select id="chStartList">
										<option value="0" selected>通道0</option>
										<option value="1">通道1</option>
                                        <option value="2">通道2</option>
                                        <option value="3">通道3</option>
                                        <option value="4">通道4</option>
                                        <option value="5">通道5</option>
                                        <option value="6">通道6</option>
                                        <option value="7">通道7</option>
                                        <option value="8">通道8</option>
                </select> &nbsp;&nbsp;
            <button style="width:90px;padding:0;margin:0;" id="startBtn" class="btn">开始播放</button> &nbsp;&nbsp;
            <select id="chCloseList">
										<option value="0" selected>通道0</option>
										<option value="1">通道1</option>
                                        <option value="2">通道2</option>
                                        <option value="3">通道3</option>
                                        <option value="4">通道4</option>
                                        <option value="5">通道5</option>
                                        <option value="6">通道6</option>
                                        <option value="7">通道7</option>
                                        <option value="8">通道8</option>
                </select> &nbsp;&nbsp;
            <button style="width:90px;padding:0;margin:0;" id="stopBtn" class="btn">结束播放</button>
        </div>
    </div>

    <script type="text/javascript" src="js/msePlugin.js"></script>

    <table>
        <tr>
            <td><video id="video0" autoplay="autoplay" controls muted="muted" webkit-playsinline="true" width="640" height="360"></video></td>
            <td><video id="video1" autoplay="autoplay" controls muted="muted" webkit-playsinline="true" width="640" height="360"></video></td>
            <td><video id="video2" autoplay="autoplay" controls muted="muted" webkit-playsinline="true" width="640" height="360"></video></td>
        </tr>
        <tr>
            <td><video id="video3" autoplay="autoplay" controls muted="muted" webkit-playsinline="true" width="640" height="360"></video></td>
            <td><video id="video4" autoplay="autoplay" controls muted="muted" webkit-playsinline="true" width="640" height="360"></video></td>
            <td><video id="video5" autoplay="autoplay" controls muted="muted" webkit-playsinline="true" width="640" height="360"></video></td>
        </tr>
        <tr>
            <td><video id="video6" autoplay="autoplay" controls muted="muted" webkit-playsinline="true" width="640" height="360"></video></td>
            <td><video id="video7" autoplay="autoplay" controls muted="muted" webkit-playsinline="true" width="640" height="360"></video></td>
            <td><video id="video8" autoplay="autoplay" controls muted="muted" webkit-playsinline="true" width="640" height="360"></video></td>
        </tr>
    </table>
    <div class="ratio"></div>

    <script>
        window.onload = function() {
            var websocket = new Array(9); //大小按照自己实际通道数设置
            var cameraStrs = new Array(9); //摄像机编号
            //cameraStrs[0]='cXNybzkuLmBjbGhtOWhla3gvMC9XRT8wLy0wMS0wMDAtMDIvOTQ0My5Sc3FkYGxobWYuc3FgYmpyLjQvMA==';
            cameraStrs[0] = 'rtsp://admin:tsl123456@10.37.125.83:554/cam/realmonitor?channel=63&subtype=0'; // ---x
            cameraStrs[1] = 'rtsp://admin:tsl123456@10.37.125.1:554/cam/realmonitor?channel=8&subtype=0'; // ---x
            cameraStrs[2] = 'rtsp://admin:tsl123456@10.37.125.69:554/cam/realmonitor?channel=49&subtype=0'; // ---x
            cameraStrs[3] = 'rtsp://admin:tsl123456@10.37.125.1:554/cam/realmonitor?channel=30&subtype=0'; // ---x
            cameraStrs[4] = 'rtsp://admin:tsl123456@10.37.125.1:554/cam/realmonitor?channel=7&subtype=0';
            cameraStrs[5] = 'rtsp://admin:tsl123456@10.37.125.88:554/cam/realmonitor?channel=68&subtype=0'; // ---x
            cameraStrs[6] = 'rtsp://admin:tsl123456@10.37.125.1:554/cam/realmonitor?channel=15&subtype=0';
            cameraStrs[7] = 'rtsp://admin:tsl123456@10.37.125.1:554/cam/realmonitor?channel=3&subtype=0';

            function videocallback(index, userData) {
                if (userData == 5) {
                    console.log('can not open this rtsp,channel:' + index);
                } else if (userData == 6) {
                    console.log('this rtsp is over,channel:' + index);
                }
            }
            //按钮事件
            var startBtn = document.getElementById("startBtn");
            var stopBtn = document.getElementById("stopBtn");
            var chstartList = document.getElementById("chStartList");
            var chcloseList = document.getElementById("chCloseList");
            //一个websocket 对应一个video  这里初始化了9个
            startBtn.onclick = function() {
                this.style.backgroundColor = 'rgb(219, 74, 74)';
                var sindex = chstartList.selectedIndex;
                var rtspurl = cameraStrs[sindex];
                //ws,ws的url,通道号,回调函数
                VideoShow(websocket[sindex], 'ws://183.67.39.246:8999/001-' + rtspurl + '$', sindex, videocallback);

            }
            startBtn.onmouseout = function() {
                this.style.backgroundColor = '';
            }
            stopBtn.onclick = function() {
                this.style.backgroundColor = 'rgb(219, 74, 74)';
                var sindex = chcloseList.selectedIndex;
                if (websocket[sindex]) {
                    websocket[sindex].send("000");
                    websocket[sindex].close();
                    websocket[sindex] = null;
                }
                var video = document.getElementById("video" + chcloseList.value);
                video.pause();
                video.src = '';
                video.removeAttribute('src'); // empty source
                while (video.childElementCount) video.firstChild.remove();
                video.load();
            }
            stopBtn.onmouseout = function() {
                this.style.backgroundColor = '';
            }
        };
    </script>

</body>

</html>